<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录/注册</title>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/airent/css/login.css}">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<style>
    html,body{
        width:100%;
        height:100%
    }
    body{
        background: url(../airent/imgs/banner01.jpg) no-repeat top left;
        background-size: cover;
    }
    .zhezhao{
        position: fixed;
        left: 0px;
        top: 0px;
        background: #000;
        width: 100%;
        height: 100%;
        opacity: 0.5;
    }
    .zhezhao2{
        position: fixed;
        left: 0px;
        top: 0px;
        background: #000;
        width: 100%;
        height: 100%;
        opacity: 0.5;
    }
    .zhezhao3{
        position: fixed;
        left: 0px;
        top: 0px;
        background: #000;
        width: 100%;
        height: 100%;
        opacity: 0.5;
    }
    .pop-up{
        position: relative;
        padding: 40px;
        background: #fff;
        width: 25%;
        height: 55%;
        border-radius: 5px;
        margin: 5% auto;

    }
    #header-right{
        position: absolute;
        width: 25px;
        height: 25px;
        border-radius: 5px;
        background: red;
        color: #fff;
        right: 5px;
        top: 5px;
        text-align: center;
    }
    #header-right2{
        position: absolute;
        width: 25px;
        height: 25px;
        border-radius: 5px;
        background: red;
        color: #fff;
        right: 5px;
        top: 5px;
        text-align: center;
    }
    #header-right3{
        position: absolute;
        width: 25px;
        height: 25px;
        border-radius: 5px;
        background: red;
        color: #fff;
        right: 5px;
        top: 5px;
        text-align: center;
    }
    .login-register-btn{
        text-decoration: none;
        color: #fff;
    }
    #lg1:hover{
        color: blue;
    }
    #lg2:hover{
        color: blue;
    }
    #lg3:hover{
        color: blue;
    }
    #eye{
        position: absolute;
        margin-left: 70px;
        margin-top: 15px;
    }
    #myEye{
        position: absolute;
        margin-left: 70px;
        margin-top: 15px;
    }
    .modal-dialog {
        position: absolute;
        width: 500px;
        margin-left: 700px;
        margin-top: 80px;
        z-index: 9999999;
    }
</style>
<body>

<div  class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <div class="form-group">
                        <span id="tip" style="color: #ff0000;"></span>
                        <span id="tips" th:text="${msg}" style="color: #ff0000;" th:if="${!#strings.isEmpty(msg)}"></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="zhezhao" id='zhezhao'>
    <div class="pop-up" >
        <!--        <div id="header-right" onclick="hidder()">x</div>-->
        <form id="formId" method="post" th:action="@{/userDto/login}">
            <div class="login_box">
                <h2 class="login_panel_title">账号登录</h2>
                <div class="form">
                    <ul class="input_box">
                        <li class="first_child form_input_item phonenum" style>
                            <input class="input" maxlength="11" placeholder="请输入账号" type="text" id="name" name="userName" autocomplete="username" required>
                        </li>
                        <li class="form_input_item last_child" style>
                            <input class="code_type input" placeholder="账号密码" type="password" id="password" name="userPwd" autocomplete="off" required>
                            <i class="fa fa-eye-slash" th:onclick="|showHide()|" id="myEye"></i>
                        </li>
                    </ul>
                </div>
                <button type="button" class="btn btn-sm btn-light" onclick="click4()">没有账号？前往注册</button>
                <div>
                    <button type="button" class="btn btn-sm btn-link" onclick="click5()">手机一键登录</button>
                </div>
                <div th:if="${session.user != null}">
                    <!--<button type="button" class="btn btn-sm btn-link" onclick="click5()">退出</button>-->
                    <a class="btn btn-sm btn-link" th:href="@{/logout}">退出</a>
                </div>
                <div class="login_remember remember" style>
                    <div id="lg1" class="btn confirm-btn login_panel_op login_submit _bgcolor" th:onclick="|login()|">登录</div>
                    <div class="login_panel_change_login_type">
                        <div class="login_panel_change_login_type">
                            <p style="color:#AAA;margin-top: 10px;font-size: 12px;line-height: 14px;">
                                <label class="checkbox-btn">
                                    <input type="checkbox" id="aa">

                                    <!--                                <input type="checkbox" name="remember" data-defval="1" class="mind-login remember_input" checked="">-->
                                    我已阅读并同意
                                    <a class="link-btn _color" th:href="@{/Potplayer}" target="_blank">《airent隐私政策》</a>
                                    及
                                    <a class="link-btn _color" th:href="@{/Agreement}" target="_blank">《airent用户使用协议》</a>
                                </label>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="zhezhao2" id='zhezhao2'>
    <div class="pop-up" >
        <!--        <div id="header-right2" onclick="hidder2()">x</div>-->
        <div class="login_box">
            <h2 class="login_panel_title">账号注册</h2>
            <div class="form">
                <ul class="input_box">
                    <li class="first_child form_input_item phonenum" style>
                        <input class="input" maxlength="9" placeholder="以字母开头，输入5-9位字母数字下划线" type="text" id="reg_name"  name="userName"  required="required">
                    </li>
                    <li class="form_input_item last_child" style>
                        <input class="code_type input" placeholder="输入6-9位字母数字" type="password" id="reg_pwd" minlength="6" maxlength="9" name="userPwd"  required="required">
                        <i class="fa fa-eye-slash" th:onclick="|showHide()|" id="eye"></i>
                    </li>
                </ul>
            </div>
            <button type="button" class="btn btn-sm btn-light" onclick="click3()">已有账号？前往登录</button>
            <div class="login_remember remember" style>
                <div id="lg2" class="btn confirm-btn login_panel_op login_submit _bgcolor" th:onclick="|reg()|">注册</div>
                <div class="login_panel_change_login_type">
                    <div class="login_panel_change_login_type">
                        <p style="color:#AAA;margin-top: 10px;font-size: 12px;line-height: 14px;">
                            <label class="checkbox-btn">
                                <input type="checkbox" id="bb">
                                <!--                                <input type="checkbox" name="remember" data-defval="1" class="mind-login remember_input" checked="checked">-->
                                我已阅读并同意
                                <a class="link-btn _color" th:href="@{/Potplayer}" target="_blank">《airent隐私政策》</a>
                                及
                                <a class="link-btn _color" th:href="@{/Agreement}" target="_blank">《airent用户使用协议》</a>
                            </label>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="zhezhao3" id='zhezhao3'>
    <div class="pop-up" >
        <!--        <div id="header-right3" onclick="hidder3()">x</div>-->
        <form id="telLogin" th:action="@{/userDto/telLogin}" method="post">
            <div class="login_box">
                <h2 class="login_panel_title">手机一键登录</h2>
                <div class="form">
                    <ul class="input_box">
                        <li class="first_child form_input_item phonenum" style>
                            <input class="input" maxlength="11" placeholder="请输入手机号" type="text" id="tel" name="userTel" autocomplete="username">
                        </li>
                        <li class="form_input_item last_child" style>
                            <input class="code_type input" placeholder="请输入短信验证码" type="text" id="code" name="newCode" autocomplete="off">
                            <a class="text-primary" id="code_box" href="javascript:void(0)" th:onclick="|getCode()|">获取验证码</a>
                        </li>
                        <button type="button" class="btn btn-sm btn-light" onclick="click6()" style="margin-top: 15px">使用账号登录</button>
                    </ul>
                </div>
                <div class="login_remember remember" style>
                    <div id="lg3" class="btn confirm-btn login_panel_op login_submit _bgcolor" th:onclick="|toTelLogin()|">登录</div>
                    <div class="login_panel_change_login_type">
                        <div class="login_panel_change_login_type">
                            <p style="color:#AAA;margin-top: 10px;font-size: 12px;line-height: 14px;">
                                <label class="checkbox-btn">
                                    <input type="checkbox" id="cc">
                                    <!--                                <input type="checkbox" name="remember" data-defval="1" class="mind-login remember_input" checked="checked">-->
                                    我已阅读并同意
                                    <a class="link-btn _color" th:href="@{/Potplayer}" target="_blank">《airent隐私政策》</a>
                                    及
                                    <a class="link-btn _color" th:href="@{/Agreement}" target="_blank">《airent用户使用协议》</a>
                                </label>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script th:inline="javascript">
   /* $(function (){
        let user = '[[${session.user}]]';
        if (user !== "" || user != null){
            location.href = "/logout";
        }
    })*/
</script>

<script type="text/javascript">

    function showHide(){

        let eye = document.getElementById("eye");
        let pwd = document.getElementById("reg_pwd");

        let myEye = document.getElementById("myEye");
        let myPwd = document.getElementById("password");

        if (pwd.type == "password") {
            pwd.type = "text";
            eye.className='fa fa-eye'
        }else {
            pwd.type = "password";
            eye.className='fa fa-eye-slash'
        }

        if (myPwd.type == "password") {
            myPwd.type = "text";
            myEye.className='fa fa-eye'
        }else {
            myPwd.type = "password";
            myEye.className='fa fa-eye-slash'
        }
    }

    function reg(){
        let tips = document.getElementById("tip");

        let ck = document.getElementById("bb");
        let userName = $("#reg_name").val();
        let userPwd = $("#reg_pwd").val();

        let p = /^[a-zA-Z]\w{4,8}$/;
        let q = /^[a-zA-Z0-9]{6,9}/;

        let url = "[[@{/userDto/register}]]";

        if (!ck.checked){
        }else if (userName == null || userName == "" || userPwd == null || userPwd == ""){
            tips.innerHTML="用户名或者密码不能为空";
            $('#myModal').modal('show');
        }else if(!p.test(userName)){
            tips.innerHTML="用户名格式不正确";
            $('#myModal').modal('show');
        }else if(!q.test(userPwd)){
            tips.innerHTML="密码格式不正确";
            $('#myModal').modal('show');
        }else {
            $.post(url,"userName="+userName+"&userPwd="+userPwd,function (data){
                if (data == "1"){
                    tips.innerHTML="系统繁忙，请稍后再试";
                    $('#myModal').modal('show');
                }else if(data == "2"){
                    location.href = "[[@{/login_register.html}]]";
                }else {
                    tips.innerHTML="用户名已存在";
                    $('#myModal').modal('show');
                }
            },"Json");
        }
    }

    function login(){
    //    let tip = document.getElementById("tips");
        let tip2 = document.getElementById("tip");
        let ck = document.getElementById("aa");
        let userName = $("#name").val();
        let userPwd = $("#password").val();

        let p = /^[a-zA-Z]\w{4,8}$/;
        let q = /^[a-zA-Z0-9]{6,8}/;

        let user = '[[${session.user}]]'
        if (user !== ""){
            tip2.innerHTML="请先退出再登录";
            $('#myModal').modal('show');
        }else if (!ck.checked){
        }else if (userName == null || userName == ""){
            tip2.innerHTML="用户名不能为空";
            $('#myModal').modal('show');
        }else if (userPwd == null || userPwd == ""){
            tip2.innerHTML="密码不能为空";
            $('#myModal').modal('show');
        }else if(!p.test(userName)){
            tip2.innerHTML="用户名格式不正确";
            $('#myModal').modal('show');
        }else if(!q.test(userPwd)){
            tip2.innerHTML="密码格式不正确";
            $('#myModal').modal('show');
        }else {
    /*        $("#formId").submit();
            if (tip.innerText() != null || tip.innerText() != ""){
                $('#myModal').modal('show');
            }*/
            let url = "[[@{/userDto/login}]]";
 //           let userDto={"userName":userName,"userPwd":userPwd};
            $.post(url,"userName="+userName+"&userPwd="+userPwd,function (result){
                if (result == "1"){
                    tip2.innerHTML="该用户因涉嫌违规已被封禁";
                    $('#myModal').modal('show');
                }else if (result == "0"){
                    location.href = "[[@{/index.html(city='上海')}]]";
                }else if (result == "2"){
                    tip2.innerHTML="用户名不存在";
                    $('#myModal').modal('show');
                }else if (result == "3"){
                    tip2.innerHTML="密码错误";
                    $('#myModal').modal('show');
                }else if (result == "4"){
                    tip2.innerHTML="系统繁忙";
                    $('#myModal').modal('show');
                }else {

                }
            },"Json")
        }
    }

    function getCode(){
        let tip = document.getElementById("tip");
        let tel = $("#tel").val();
        let regs = /^[1][3,4,5,7,8][0-9]{9}$/;
        let url = "[[@{/userDto/getCode}]]";

        if (tel == null || tel == ""){
            tip.innerHTML="请输入手机号";
            $('#myModal').modal('show');
        }else if (!regs.test(tel)){
            tip.innerHTML="请输入正确的手机号";
            $('#myModal').modal('show');
        }else{
            $.post(url,"userTel="+tel,function (data){
                if (data == "1"){
                    tip.innerHTML="短信已发送,请注意查收";
                    $('#myModal').modal('show');;
                }else{
                    tip.innerHTML="短信发送失败";
                    $('#myModal').modal('show');
                }
            },"Json")
        }
    }

    function toTelLogin(){
        let tips = document.getElementById("tip");
        let ck = document.getElementById("cc");
        let tel = $("#tel").val();
        let nowCode = $("#code").val();
        let regs = /^[1][3,4,5,7,8][0-9]{9}$/;
        let url = "[[@{/userDto/telLogin}]]";
        if (!ck.checked){}
        else if (tel == null || tel == ""){
            tips.innerHTML="手机号不能为空";
            $('#myModal').modal('show');
        } else if (!regs.test(tel)){
            tips.innerHTML="请输入正确的手机号";
            $('#myModal').modal('show');
        }else {
            $.post(url,"userTel="+tel+"&newCode="+nowCode,function (data){
                if (data == "1"){
                    tips.innerHTML="两次手机号不一致";
                    $('#myModal').modal('show');
                }else if (data == "2"){
                    tips.innerHTML="验证码错误";
                    $('#myModal').modal('show');
                }else if (data == "3"){
                    tips.innerHTML="系统繁忙";
                    $('#myModal').modal('show');
                }else {
                    location.href = "[[@{/index.html(city='上海')}]]";
                }
            },"Json")
        }
    }

    document.getElementById('zhezhao2').style.display="none";

    function click3() {
        document.getElementById('zhezhao').style.display="";
        document.getElementById('zhezhao2').style.display="none";
    }
    function click4() {
        document.getElementById('zhezhao2').style.display="";
        document.getElementById('zhezhao').style.display="none";
    }
    document.getElementById('zhezhao3').style.display="none";

    function click5() {
        document.getElementById('zhezhao3').style.display="";
        document.getElementById('zhezhao').style.display="none";
    }
    function click6() {
        document.getElementById('zhezhao').style.display="";
        document.getElementById('zhezhao3').style.display="none";
    }

</script>
</body>
</html>
